<template>
  <div
    class="v-select-dropdown"
    :class="[{'is-multiple': $parent.multiple}, popperClass]"
    :style="{ minWidth: minWidth }">
    <slot></slot>
  </div>
</template>

<script>
  import Popper from '@/vuego/utils/vue-popper';

  export default {
    name: 'VSelectDropdown',
    componentName: 'VSelectDropdown',
    mixins: [Popper],
    props: {
      placement: {
        default: 'bottom-start',
      },
      boundariesPadding: {
        default: 0,
      },
      popperOptions: {
        default() {
          return {
            forceAbsolute: true,
            gpuAcceleration: false,
          };
        },
      },
    },
    data() {
      return {
        minWidth: '',
      };
    },
    computed: {
      popperClass() {
        return this.$parent.popperClass;
      },
    },
    watch: {
      /* eslint object-shorthand: 0 */
      '$parent.inputWidth'() {
        this.minWidth = `${this.$parent.$el.getBoundingClientRect().width}px`;
      },
    },
    mounted() {
      this.referenceElm = this.$parent.$refs.reference.$el;
      this.popperElm = this.$el;
      this.$parent.popperElm = this.popperElm;
      this.$on('updatePopper', () => {
        if (this.$parent.visible) this.updatePopper();
      });
      this.$on('destroyPopper', this.destroyPopper);
    },
  };
</script>
